<ng-template #extra>
  <button nz-button nzType="primary" [nzLoading]="nzLoading" (click)="submit()">{{nzTitle}}</button>
</ng-template>

<nz-card nzTitle="批量创建网关" [nzExtra]="extra">
  <form nz-form [formGroup]="group" (ngSubmit)="submit()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>名称</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="nameErrorTpl">
        <input nz-input formControlName="name" />
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入名称!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username">用户名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="username" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password">密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="password" type="password" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="desc">描述</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="desc" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="amount">创建数量</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="">
        <nz-input-number formControlName="amount" [nzMin]="1"></nz-input-number>
      </nz-form-control>
    </nz-form-item>
    <!-- <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="disabled"
          >禁用</nz-form-label
        >
  
        <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback>
          <nz-switch 
            name="disabled"
            formControlName="disabled"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item> -->
  </form>
</nz-card>
<div *ngIf="datum&&datum.length" style="text-align: right;">
  <button nz-button nzType="primary" (click)="handleExport()">
    <i nz-icon nzType="cloud-download"></i>
    导出
  </button>
</div>
<nz-table *ngIf="datum&&datum.length" #basicTable [nzData]="datum" [nzShowPagination]="false"
  [nzFrontPagination]="false">
  <thead>
    <tr>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="name">名称</th>
      <th nzColumnKey="username">用户名</th>
      <th nzColumnKey="password">密码</th>
      <th nzColumnKey="desc">说明</th>
      <th nzColumnKey="disabled">启用</th>
      <th nzColumnKey="created" [nzSortFn]="true">日期</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index">
      <td>{{data.id}}</td>
      <td>{{data.name}}</td>
      <td>{{data.username}}</td>
      <td>{{data.password}}</td>
      <td>{{data.desc}}</td>
      <td>{{data.disabled||false}}</td>
      <td>{{data.created | date}}</td>
    </tr>
  </tbody>
</nz-table>